Skip to main content

Third-Party Services – NAVIGO

NAVIGO relies on several third-party services and frameworks to deliver a scalable, interactive, and secure experience.
This section explains why each service was chosen, how it is used, and setup instructions.

Firebase​

Why Chosen​

  • Scalable & Reliable: Supports thousands of users with minimal infrastructure setup.
  • Free Tier: Spark plan is sufficient for development and testing.
  • All-in-One: Handles authentication, database, storage, hosting, and serverless functions.

Usage in NAVIGO​

  • Authentication: Email/password login and Google Sign-In integration.
  • Firestore Database: Stores users, quests, userQuests, and progress data.
  • Cloud Functions (Future Use): Secure validation of quest completions or leaderboard updates.
  • Hosting (Optional): Deploy the web app directly to Firebase Hosting.

Setup Instructions​

  1. Visit Firebase Console and create a new project (NAVIGO).
  2. Register your web app and copy the firebaseConfig.
  3. Install the Firebase SDK in your project: 
    npm install firebase

Tailwind CSS – NAVIGO

Why Chosen​

  • Utility-First CSS: Rapid UI development with reusable classes.
  • Responsive by Default: Mobile and desktop layouts require minimal effort.
  • Popular & Well-Supported: Widely adopted in React projects with extensive community resources.

Usage in NAVIGO​

  • Provides consistent styling for pages including Landing, Dashboard, Quest List, Leaderboard, and Profile.
  • Ensures modern and responsive UI design without manually writing large CSS files.

Setup Instructions​

  1. Install Tailwind dependencies: 
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

Configure tailwind.config.js:

module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: { extend: {} },
plugins: [],
};

Import Tailwind styles in src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Google Maps API – NAVIGO

Why Chosen​

  • Location-Based Features: Enables GPS-verified quests across campus.
  • Widely Supported: Excellent documentation and developer support.
  • Free Tier: $200 free usage per month, sufficient for student projects.

Usage in NAVIGO​

  • Displays campus maps with quest markers.
  • Validates location-based quest completion by checking user proximity to coordinates.
  • Enhances player experience by showing dynamic location data in real-time.

Setup Instructions​

  1. Go to Google Cloud Console and create a new project.
  2. Enable Maps JavaScript API.
  3. Generate an API Key and optionally restrict it to your domain for security.
  4. Use the API key in React components for map rendering and location verification: 
    <GoogleMap
      apiKey="YOUR_API_KEY"
      center={{ lat: 0, lng: 0 }}
      zoom={15}
    />